<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css导航栏</title>
		<style type="text/css">
			li{
				float: left;
				text-align:center;
				list-style-type: none;
				background-color: bisque;
			}
			
			a{
				float: left;
				width: 150px;
				text-decoration: none;
				color: black;
				/*border边界*/
				border-right: 1px solid white;
			}
			
			a:hover{
				color: coral;
			}
			a:active{
				color: blanchedalmond;
			}
			
			.ps1{
				margin: -5px 3px 10px;
				border: dashed;
			}
			.ps2{
				margin: 5px 3px 10px;
				border: dotted;
				padding: -5px 5px 3px;
			}
			.content{
				float: none;
				width: 600px;
			}
			.content2{
				margin: 5px 3px 3px;
				float: none;
				width: 600px;
			}
			.sub{
				width: 45%;
				margin: 10px 5px 6px;
				float: left;
			}
			.sub2{
				width: 45%;
				margin: 20px 5px 6px;
				float: left;
				background-color: #FFE4C4;
			}
			.sub3{
				width: 45%;
				height: 30px;
				margin: 10px 5px 6px;
				float: left;
			}
			p{
				text-align: center;
				
			}
			#title{
				float: none;
				background-color: #FFFFFF;
				
				
			}
		</style>
	</head>
	<body>
		<!--<li id="title">谷歌一下，我就知道</li>
		<ul>
			<li><a href="https://www.baidu.com/">首页</a></li>
			<li><a href="https://zhidao.baidu.com/">知道</a></li>
			<li><a href="http://map.baidu.com/">地图</a></li>
			<li><a href="http://music.baidu.com/">音乐</a></li>
			<li><a href="http://news.baidu.com/">新闻</a></li>
			<li><a href="http://www.4399.com/">游戏</a></li>
		</ul>-->
		
		
		<br />
		<div class="content">
		<div class="sub">
			<p class="ps1">你好</p>
		</div>
		<div class="ps2">
			<p>很高兴见到你</p>
		</div>
		
		</div>
		
		
		<div class="content2">
		<div class="sub2">
			<p class="ps1">今天星期二</p>
			<p class="ps2">天气晴朗</p>
		</div>
		
		<div class="sub3">
			<p class="ps2">注意防晒</p>
		</div>
		</div>
	</body>
</html>
